import React from 'react';
//引入umi的路由事件
import { history } from 'umi';
import Style from '@/scss/login.scss';

import axios from 'axios';
import login_back from '@/img/loginimg/login_back.png';
import CONST from '@/inits/consts';
const LOGINDATA = CONST.LOGINDATA;
const USER = LOGINDATA.USER;
//引入自己封装的jwt工具类
import JWT from '@/utils/jwtutil';
//引入mobx文件数据
import { observer } from 'mobx-react';
import loginstore from '@/store/login_store';
//引入ui库
import { Form, Input, Button, Checkbox } from 'antd';
//设置默认正确用户名
import { UserOutlined, LockOutlined } from '@ant-design/icons';
//这是组件需要的属性配置
const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};
const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
};

/* 登录注册我将使用刚学的Hooks技术,所以与index部分的写法有所不同  (最大区别:不使用class声明而是函数式声明) */
const handleGoRegiste = () => {
  history.push('/register');
};
//此处游客进入,需要加一个标识符,当游客进入时,所有操作将不提交至数据库(后期补上)
const handleGoIndex = () => {
  loginstore.setActiveUser();
  history.push('/index');
};
const handleGoMiss = () => {
  history.push('/miss');
};
/**************************    **************************************** */
//方法一、输入框不为空时调用登录函数 这里使用假数据假装登录,如果错误,将传入错误信息
const onFinish = (values: any) => {
  loginstore.setUser({
    checked: values.remember,
    username: values.username,
    password: values.password,
  });
  //然后调用登录接口,假使账号密码不符合自定义的数据,传入错误信息导致登陆错误   ---已改正
  // values.username == USER.username && values.password == USER.password
  //   ? hadleSubmit()
  //   : hadleSubmit('错误的参数');
  hadleSubmit(values.username, values.password);
};
//方法二:初始化数据
const initUser = () => {
  return loginstore.initUser();
};
//方法三:提交函数
const hadleSubmit: (sign: string, password) => void = (sign, password) => {
  axios
    .get(LOGINDATA.BASEPATH, {
      params: {
        username: sign,
        password: password,
      },
    })
    .then((result) => {
      if (result.data.length > 0) {
        //将是否存储账号,用户名传入
        let info: InfoType = {
          username: loginstore.username,
          checked: loginstore.checked,
          password: loginstore.password,
          head: result.data[0].head,
          create_time: result.data[0].create_time,
          id: result.data[0].id,
          todos: result.data[0].todos,
        };
        let jwt_token = JWT.sign({ sign: info }, LOGINDATA.KEY, LOGINDATA.TIME);

        //可以使用 jsonwebtoken设置过期时间并且加密 也可以额外加一个时间属性设置
        localStorage.setItem('dbtoken', jwt_token);
        alert('登录成功,进行跳转');
        history.push('/index');
      } else {
        localStorage.removeItem('dbtoken'); //登陆失败,将之前保存数据的删除
        alert('登录失败,账户或者密码错误');
      }
    })
    .catch((e) => {
      alert(e);
    });
};
function Login() {
  return (
    <div className={Style.bg}>
      <img src={login_back} alt="" />
      <div className={Style.denlu}>
        <h2>登&nbsp;&nbsp;&nbsp;&nbsp;录</h2>
        {/* 这里只是随意给了样式,后面自己修改 */}
        <Form
          {...layout}
          className={Style.shuru}
          name="basic"
          initialValues={initUser()}
          onFinish={onFinish}
        >
          <Form.Item
            name="username"
            rules={[{ required: true, message: '账号不可为空!' }]}
          >
            <Input prefix={<UserOutlined />} placeholder="请输入账号" />
          </Form.Item>

          <Form.Item
            name="password"
            rules={[{ required: true, message: '密码不可为空!' }]}
          >
            <Input.Password
              prefix={<LockOutlined />}
              placeholder="请输入密码"
            />
          </Form.Item>

          <Form.Item
            className={Style.checkbox}
            {...tailLayout}
            name="remember"
            valuePropName="checked"
          >
            <Checkbox>记住密码</Checkbox>
          </Form.Item>

          <Form.Item {...tailLayout}>
            <Button type="primary" htmlType="submit">
              登录
            </Button>
          </Form.Item>
        </Form>
        <div className={Style.txt}>
          <span onClick={() => handleGoMiss()}>忘记密码?</span>
          <span onClick={() => handleGoRegiste()}>注册</span>
        </div>
        <div className={Style.visitor}>
          <span onClick={() => handleGoIndex()}>游客进入&gt; </span>
        </div>
      </div>
    </div>
  );
}

export default observer(Login);
